CSSだけで吹き出しをつくる方法はたくさん記事がみつかり、ほぼコピペでOK！なのですが、、、

• 枠線の太さを変更しようとすると複数個所変更が必要で、慣れないとドコをどう変えればいいのか分からない
• 左に吹き出しを付けようとするとコンテンツ幅をはみ出してしまい、スマートフォンなどで不安

参考にした記事は大体同じCSSで処理しているので、他の書き方だと不具合や乱れがあるのかも？と思いましたが、とりあえず大体の環境で大丈夫みたいなので残しておきます。

HTML

ワードプレス、ビジュアルエディタでスタイルを適用、という前提なのでテキストを<div class=”○○～”>で囲むだけ。

<div class="block-baloon-top">
上向きの吹き出しです。<br>
改行も問題ありません。
</div>

• block-baloon-top
• block-baloon-right
• block-baloon-bottom
• block-baloon-left

CSS

上・右・下・左共通の設定です。

/* ---------- 吹き出し共通設定 ---------- */
.block-baloon, .block-baloon-top, .block-baloon-right, .block-baloon-bottom, .block-baloon-left	{
	display: table;
	padding: 1em;
	margin-bottom: 1em;
	position: relative;
	background-color: #f2f2f2;
	border: 2px solid #222;
	border-radius: 0.5em;
}
.block-baloon:before, .block-baloon:after, .block-baloon-top:before, .block-baloon-top:after, .block-baloon-right:before, .block-baloon-right:after, .block-baloon-bottom:before, .block-baloon-bottom:after, .block-baloon-left:before, .block-baloon-left:after	{
	content: '';
	position: absolute;
}

コンテンツ幅いっぱいで良ければ「display: table」は不要。

• 背景色：#F2F2F2
• 枠線太さ：2px
• 枠線色：#222
• 角丸：0.5em

ここらは任意に変更可。

吹き出し：上

/* ---------- 吹き出し：上 ---------- */
.block-baloon-top	{
	margin-top: 2.5em;
}
.block-baloon-top:first-child	{
	margin-top: 1.5em;
}
.block-baloon-top:before, .block-baloon-top:after	{
	top: -1.5em;
	left: 50%;
	transform: translateX(-50%);
	border-right: 10px solid transparent;
	border-bottom: solid 1.5em #222;
	border-left: 10px solid transparent;
}
.block-baloon-top:after	{
	top: calc( 4px - 1.5em );
	border-bottom: solid 1.5em #f2f2f2;
}

• calc( 4px – 1.5em )の、「4px」がズレの大きさ = 枠線太さです。
  文字部は垂直・水平、矢印部は斜めなので、一致しません。ここは見た目で適当に変えてOK。ただし、極端な値にすると、文字が隠れたり吹き出しがおかしな位置に行ったりします。
• 「%」は、吹き出しの位置を決めています。
• :before、:afterの「em」が吹き出しの高さを決めています。
• :before、:afterの「px」が吹き出しの幅を決めています。

%、em、pxを一斉に変えていけば形が崩れることは無いと思います。

吹き出し：右

/* ---------- 吹き出し：右 ---------- */
.block-baloon-right	{
	margin-right: 1.5em;
	max-width: calc( 100% - 1.5em );
}
.block-baloon-right:before, .block-baloon-right:after	{
	top: 50%;
	transform: translateY(-50%);
	right: -1.5em;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 1.5em solid #222;
}
.block-baloon-right:after	{
	right: calc( 4px - 1.5em );
	border-left: solid 1.5em #f2f2f2;
}

以下、要領は上向きの時と同じ。

top: 50%、transform: translateY(-50%)で高さ中央にしているので、場合によっては「top: 1em」「transformはナシ」とかの方がいいかもです。吹き出し位置が左の場合も同様。

吹き出し：下

/* ---------- 吹き出し：下 ---------- */
.block-baloon-bottom	{
	margin-bottom: 2.5em;
}
.block-baloon-bottom:before, .block-baloon-bottom:after	{
	left: 50%;
	transform: translateX(-50%);
	bottom: -1.5em;
	border-top: 1.5em solid #222;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}
.block-baloon-bottom:after	{
	bottom: calc( 4px - 1.5em );
	border-top: solid 1.5em #f2f2f2;
}

吹き出し：左

/* ---------- 吹き出し：左 ---------- */
.block-baloon-left	{
	margin-left: 1.5em;
	max-width: calc( 100% - 1.5em );
}
.block-baloon-left:before, .block-baloon-left:after	{
	top: 50%;
	transform: translateY( -50% );
	left: -1.5em;
	border-top: 10px solid transparent;
	border-right: 1.5em solid #222;
	border-bottom: 10px solid transparent;
}
.block-baloon-left:after	{
	left: calc( 4px - 1.5em );
	border-right: solid 1.5em #f2f2f2;
}

この向きの場合、左にアバターアイコンなどがあるケースが多いと思うので、コンテンツ幅云々は関係ないとも思いますが、やはり制御できないと気持ち悪いので。

枠線、背景色が要らない場合

beforeのボーダーカラー（上記例で#222としている部分）を背景色と一緒にして、afterを「content: none」にすれば背景だけになります。

面倒臭い場合は、枠線色を背景色と同じ色にしてしまえば「無い様に」見えますね。

逆に枠線だけでいい場合は、これも面倒なので#FFFで塗っちゃう。

※この書き方に限らないと思いますが、border、background-colorに透過は使えません。透過色が必要な場合は画像を使った方が手っ取り早いと思います。